<template>
  <div style="margin-bottom: 15px">
    <el-form :model="feedback" :rules="rules" ref="feedbackForm">
      <el-descriptions title="用户反馈" :column="1" border>
        <el-descriptions-item label="是否匿名">
          <el-form-item>
            <el-radio-group v-model="feedback.anonymous">
              <el-radio :label="1">匿名</el-radio>
              <el-radio :label="2">实名</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="反馈内容">
          <el-form-item prop="content">
            <el-input type="textarea" :rows="3" maxlength="200" show-word-limit v-model="feedback.content" placeholder="请输入简介"/>
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
      <el-form-item style="margin-top: 15px;display: flex;justify-content: right">
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
    <el-divider content-position="center">反馈列表</el-divider>
    <el-table :data="feedList" border>
      <el-table-column prop="id" label="编号" align="center"/>
      <el-table-column prop="content" show-overflow-tooltip label="反馈内容" align="center"/>
      <el-table-column prop="reply" show-overflow-tooltip label="回复内容" align="center"/>
      <el-table-column prop="anonymous" label="匿名状态" align="center">
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.anonymous === 1">匿名</el-tag>
          <el-tag type="success" v-else>{{ scope.row.vip.name }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="回复状态" align="center">
        <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.status === 1">未回复</el-tag>
          <el-tag type="success" v-else>已回复</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="warning" @click="deleteInfo(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination hide-on-single-page :current-page="pageInfo.page" :page-size="pageInfo.limit" :total="pageInfo.total" :page-sizes="[5,10,20,50,100]" layout="total,sizes,prev,pager,next,jumper" @current-change="currentChange" @size-change="sizeChange"/>
  </div>
</template>

<script>
export default {
  name: 'FeedbackView',
  data () {
    return {
      feedback: {
        anonymous: 1,
        content: '',
        userId: ''
      },
      pageInfo: {
        page: 1,
        limit: 5,
        total: 0
      },
      feedList: [],
      rules: {
        content: [{
          required: true,
          message: '请输入反馈内容',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    getDataList () {
      this.pageInfo.userId = this.feedback.userId
      this.$http.get('api/feedback/page', this.pageInfo).then(({ data }) => {
        this.feedList = data.records
        this.pageInfo.page = data.current
        this.pageInfo.limit = data.size
        this.pageInfo.total = data.total
      })
    },
    currentChange (val) {
      this.pageInfo.page = val
      this.getDataList()
    },
    sizeChange (val) {
      this.pageInfo.limit = val
      this.getDataList()
    },
    deleteInfo (id) {
      this.$confirm(`确定删除编号为[${id}]的数据吗？`).then(() => {
        this.$http.delete(`api/feedback/delete/${id}`).then(() => {
          this.$message.success('删除成功！')
          this.getDataList()
        })
      }).catch(() => {})
    },
    submit () {
      this.$refs.feedbackForm.validate(valid => {
        if (valid) {
          this.$http.post('api/feedback/save', this.feedback).then(() => {
            this.$message.success('反馈成功')
            this.getDataList()
            this.feedback.content = ''
            this.feedback.anonymous = 1
          })
        }
      })
    }
  },
  created () {
    this.feedback.userId = JSON.parse(sessionStorage.getItem('vipInfo'))?.loginInfo?.userId
    this.getDataList()
  }
}
</script>

<style scoped>

</style>
